<template>
    <view class="modal-mask" v-if="show" @click="handleMaskClick">
        <view class="view-container" @click.stop="preventBubble">
            <view class="content-wrapper">
                <!-- 顶部标题栏 -->
                <view class="header">
                    <view class="header-left">
                        <text class="header-title">招募到了{{ total }}个小伙伴 {{ currentIndex + 1 }}/{{ candidates ?
                            candidates.length : 0 }}</text>
                        <!-- <view class="countdown" v-if="countdownTime && !isRecruitmentExpired">
                            <text class="countdown-text">剩余时间: {{ countdownTime }}</text>
                        </view> -->
                    </view>
                    <button class="cancel-btn" @click="cancelRecruit">取消招募</button>
                </view>

                <!-- 用户信息区域 -->
                <view class="user-info">
                    <image class="avatar" :src="currentCandidate.avatar" mode="aspectFill"></image>
                    <view class="user-detail">
                        <view class="user-name-row">
                            <text class="user-name">{{ currentCandidate.name }}</text>
                            <text class="real-name-tag" v-if="currentCandidate.isRealName">已实名</text>
                            <view class="match-rate">
                                <text class="match-rate-num">{{ currentCandidate.matchRate }}</text>
                                <text class="match-rate-text">条件匹配度</text>
                            </view>
                        </view>
                        <text class="user-basic">{{ currentCandidate.gender }} {{ currentCandidate.age || '未知' }}岁 {{
                            currentCandidate.height || '未知' }}cm</text>
                    </view>
                </view>

                <!-- 信誉&好评率标签 -->
                <view class="tags-row">

                    <view class="tag-reputation">
                        <view class="tag-icon">
                            <image :src="getFullImageUrl('@/static/my/tagRep.png')"
                                style="width: 62rpx; height: 32rpx;">
                            </image>
                            <text class="tag-badge">{{ currentCandidate.reputation }}</text>
                        </view>
                        <text>{{ currentCandidate.reputation > 80 ? '信誉很好' : (currentCandidate.reputation >= 60 &&
                            currentCandidate.reputation <= 80) ? '信誉一般' : '信誉很差' }}</text>
                    </view>

                    <view class="tag-rating">
                        <view class="tag-icon2">
                            <text>{{ currentCandidate.goodRate }}%</text>
                        </view>
                        <text>好评率</text>
                    </view>
                </view>
                <!-- 自我描述 -->
                <view class="section img-section">
                    <text class="section-title">自我描述： <text class="section-content">{{ currentCandidate.selfDesc
                            }}</text></text>

                </view>

                <!-- 媒体展示（横向滚动，支持图片和视频） -->
                <view class="section img-section"
                    v-if="currentCandidate.mediaList && currentCandidate.mediaList.length > 0">
                    <!-- 修复空值检查 -->
                    <scroll-view scroll-x class="img-scroll" :scroll-into-view="scrollIntoView" scroll-with-animation>
                        <view class="img-list">
                            <!-- 根据媒体类型渲染不同组件 -->
                            <template v-for="(media, index) in currentCandidate.mediaList">
                                <!-- 图片媒体 -->

                                <image v-if="media.type === 'image' || media.type === '1'" :src="media.url"
                                    mode="aspectFill" class="img-item"
                                    :class="{ 'single-img': currentCandidate.mediaList.length === 1 }"
                                    @click="handleImageClick(media)"></image>
                                <!-- 视频媒体 -->
                                <view v-else-if="media.type === 'video' || media.type === '2'"
                                    class="img-item video-container"
                                    :class="{ 'single-img': currentCandidate.mediaList.length === 1 }">
                                    <video :src="media.url" mode="aspectFill" class="dynamic-video" :controls="false"
                                        :show-center-play-btn="false" :show-fullscreen-btn="false"
                                        :show-play-btn="false" :show-progress="false" :show-mute-btn="false"
                                        :enable-progress-gesture="false" :enable-progress-tap="false"
                                        :enable-play-gesture="false" :show-loading="false"></video>
                                    <!-- 播放按钮覆盖层 -->
                                    <image class="video-play-btn" :src="getFullImageUrl('@/static/faxian/bofan.png')"
                                        style="width: 46rpx;height: 60rpx;" @click="handleVideoClick(media.url)">
                                    </image>
                                    <!-- 左下角时长显示 -->
                                    <view class="video-duration" v-if="media.duration">
                                        {{ formatVideoDuration(media.duration) }}
                                    </view>
                                </view>
                            </template>
                        </view>
                    </scroll-view>
                </view>

                <!-- 兼容旧版本：当没有mediaList时使用images字段 -->
                <view class="section img-section"
                    v-else-if="currentCandidate.images && currentCandidate.images.length > 0">
                    <scroll-view scroll-x class="img-scroll" :scroll-into-view="scrollIntoView" scroll-with-animation>
                        <view class="img-list">
                            <image v-for="(img, index) in currentCandidate.images" :key="index" :src="img"
                                mode="aspectFill" class="img-item" @click="handleImageClick({ url: img })"></image>
                        </view>
                    </scroll-view>
                </view>

                <!-- 主职工作&技能标签 -->
                <view class="section job-section"
                    v-if="currentCandidate.mainJob !== '暂无信息' && currentCandidate.skills && currentCandidate.skills !== '暂无技能信息'">
                    <!-- 新增job-section类 -->
                    <view class="section1-title" v-if="currentCandidate.mainJob && currentCandidate.mainJob !== '暂无信息'">
                        主职工作：
                        <text class="section1-content">{{ currentCandidate.mainJob
                            }}</text>
                    </view>
                    <br style="width: 642rpx;height: 1rpx;background: #D0D4D7;border-radius: 1rpx;margin-left:-19rpx"
                        v-if="currentCandidate.mainJob && currentCandidate.mainJob !== '暂无信息'" />

                    <!-- 技能标签滚动容器 -->
                    <scroll-view scroll-y class="skills-scroll"
                        v-if="currentCandidate.skills && currentCandidate.skills !== '暂无技能信息' && Array.isArray(currentCandidate.skills) && currentCandidate.skills.length > 0">
                        <view class="skills-row">
                            <view class="skill-tag" :class="{ 'selected': skill.selected }"
                                v-for="(skill, index) in currentCandidate.skills" :key="index">
                                <text class="skill-text">{{ skill.name }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="section job-section"
                    v-if="currentCandidate.specializes_cuisine && currentCandidate.specializes_cuisine !== '暂无信息'">
                    <!-- 新增job-section类 -->
                    <text class="section-title">擅长菜系： <text class="section-content">{{
                        currentCandidate.specializes_cuisine
                            }}</text></text>
                </view>


                <!-- 图片查看器 -->
                <ImageViewer v-show="showImageViewer" :showViewer.sync="showImageViewer" :avatar="viewerData.avatar"
                    :nickname="viewerData.nickname" :imageUrl="viewerData.imageUrl" :content="viewerData.content"
                    :likeCount="viewerData.likeCount" :commentCount="viewerData.commentCount" :liked="viewerData.liked"
                    :showControls="viewerData.showControls" @like="handleImageLike" @comment="handleImageComment" />

                <!-- 视频查看器 -->
                <videView :videoUrl="currentVideoUrl" v-show="showVideoView" :showViewer.sync="showVideoView"
                    @videoClosed="onVideoClosed" />

            </view>
            <!-- 选择提示&底部按钮 -->
            <view class="footer">
                <view class="select-tip">
                    <text>待选择{{ selected_total }}人，已选择{{ selectedCount }}人</text>
                </view>
                <view class="btn-row">
                    <view class="btn1 next-btn" @click="prevOne" :style="{ 'background-color': '#E9FEDF' }">
                        <image :src="getFullImageUrl('@/static/index/prev.png')" mode="aspectFill"
                            style="width: 16rpx;height: 28rpx;"></image>
                    </view>

                    <view class="btn1 next-btn" @click="nextOne" :style="{ 'background-color': '#E9FEDF' }">
                        <image :src="getFullImageUrl('@/static/index/next.png')" mode="aspectFill"
                            style="width: 16rpx;height: 28rpx;"></image>
                    </view>
                    <button class="btn1 select-btn" @click="selectTa"
                        :class="{ 'selected': currentCandidate.selected }">{{
                            currentCandidate.selected ? '已选择' : '选择ta' }}</button>
                </view>

            </view>

        </view>
    </view>
</template>


<script>
import RecruitModal from './RecruitModal.js'
import ImageViewer from '../ImageViewer/ImageViewer.vue'
import videView from '../videView/videView.vue'
export default {
    components: {
        ImageViewer,
        videView
    },
    ...RecruitModal,
    data() {
        return {
            ...RecruitModal.data(),
            showImageViewer: false,
            showVideoView: false,
            viewerData: {},
            currentVideoUrl: ''
        }
    },
    methods: {
        ...RecruitModal.methods,
        // 处理遮罩层点击事件
        handleMaskClick() {
            this.closeModal();
        },
        // 阻止事件冒泡
        preventBubble() {
            // 空方法，用于阻止事件冒泡
        },
        // 处理图片点击
        handleImageClick(media) {
            this.viewerData = {
                avatar: this.currentCandidate.avatar,
                nickname: this.currentCandidate.name,
                imageUrl: media.url,
                content: this.currentCandidate.selfDesc,
                likeCount: 0,
                commentCount: 0,
                liked: false,
                showControls: false
            };
            // 隐藏导航栏
            if (typeof wx !== 'undefined' && typeof wx.setNavigationBarHidden === 'function') {
                wx.setNavigationBarHidden({ hidden: true });
            }
            this.showImageViewer = true;
        },
        // 处理视频点击
        handleVideoClick(videoUrl) {
            this.currentVideoUrl = videoUrl;
            // 隐藏导航栏
            if (typeof wx !== 'undefined' && typeof wx.setNavigationBarHidden === 'function') {
                wx.setNavigationBarHidden({ hidden: true });
            }
            this.showVideoView = true;
        },
        // 处理图片点赞
        handleImageLike() {
            // 点赞逻辑
        },
        // 处理图片评论
        handleImageComment() {
            // 评论逻辑
        },
        // 处理视频关闭
        onVideoClosed() {
            this.showVideoView = false;
            this.currentVideoUrl = '';
            // 显示导航栏
            if (typeof wx !== 'undefined' && typeof wx.setNavigationBarHidden === 'function') {
                wx.setNavigationBarHidden({ hidden: false });
            }
        }
    },
    // 监听查看器显示状态变化，确保在查看器关闭时显示导航栏
    watch: {
        ...RecruitModal.watch,
        showImageViewer(newVal) {
            if (typeof wx !== 'undefined' && typeof wx.setNavigationBarHidden === 'function' && !newVal) {
                wx.setNavigationBarHidden({ hidden: false });
            }
        }
    }
}
</script>
<style lang="scss" src="./RecruitModal.scss"></style>
